<template>
  <view class="accessory-selector">
    <view @click="testClick" class="selector-title">
      <text>配饰与服装选择</text>
    </view>

    <!-- 添加测试按钮 -->
    <!-- <view class="debug-button" @click="testClick">测试点击事件</view> -->

    <view
      v-for="(category, categoryIndex) in categories"
      :key="categoryIndex"
      class="selector-category"
    >
      <text class="category-title">{{ category.name }}</text>
      <view class="selector-options">
        <view
          v-for="item in category.items"
          :key="item.value"
          class="selector-option"
          :class="{ 'option-selected': internalValue === item.value }"
          @click.stop.prevent="updateValue(item.value)"
          @tap="updateValue(item.value)"
          :data-value="item.value"
        >
          <view class="option-radio">
            <view class="radio-inner" v-if="internalValue === item.value"></view>
          </view>
          <view class="option-icon">{{ item.icon }}</view>
          <text class="option-text">{{ item.label }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "AccessorySelector",
  props: {
    modelValue: {
      type: String,
      default: 'glasses'
    }
  },
  data() {
    return {
      internalValue: this.modelValue, // 内部保存一份值，确保UI始终更新
      categories: [
        {
          name: "基础配饰",
          items: [
            { value: "glasses", label: "眼镜", icon: "👓" },
            { value: "hat", label: "帽子", icon: "🧢" },
            { value: "shoe", label: "鞋子", icon: "👟" },
            { value: "bagwallet", label: "包包/钱包", icon: "👜" },
          ],
        },
        {
          name: "上装",
          items: [
            { value: "shirt", label: "衬衫", icon: "👔" },
            { value: "top", label: "上衣", icon: "👕" },
            { value: "sweater", label: "毛衣", icon: "🧶" },
            { value: "jacket", label: "夹克", icon: "🧥" },
          ],
        },
        {
          name: "下装",
          items: [
            { value: "pants", label: "裤子", icon: "👖" },
            { value: "shorts", label: "短裤", icon: "🩳" },
            { value: "skirt", label: "裙子", icon: "👗" },
            { value: "dress", label: "连衣裙", icon: "👗" },
          ],
        },
        {
          name: "装饰",
          items: [
            { value: "tie", label: "领带", icon: "👔" },
            { value: "scarf", label: "围巾", icon: "🧣" },
            { value: "belt", label: "腰带", icon: "⚪" },
            { value: "watch", label: "手表", icon: "⌚" },
          ],
        },
      ],
    };
  },
  created() {
    console.log("AccessorySelector 组件已创建");
  },
  beforeMount() {
    console.log("AccessorySelector 组件准备挂载");
  },
  mounted() {
    console.log("AccessorySelector 已挂载，当前值:", this.modelValue);
    // 组件挂载时，如果当前值是 'none'，则自动选择默认的 'glasses'
    if (this.modelValue === "none") {
      this.$nextTick(() => {
        this.updateValue("glasses");
      });
    }

    // 尝试用setTimeout来测试打印是否有效
  },
  methods: {
    updateValue(value) {
      console.log('AccessorySelector 选择了:', value, '当前值:', this.modelValue);
      
      // 更新内部值，确保UI立即更新
      this.internalValue = value;
      
      // 发送事件给父组件
      this.$emit('update:modelValue', value);
      this.$emit('input', value); // 兼容旧版本v-model
      
      // 显示提示信息
      if (typeof uni !== 'undefined') {
        // uni.showToast({
        //   title: '已选择: ' + value,
        //   icon: 'none',
        //   duration: 2000
        // });
        
        // 使用uni.vibrateShort提供触觉反馈（如果支持）
        // if (uni.vibrateShort) {
        //   uni.vibrateShort();
        // }
      } else {
        // alert('已选择: ' + value);
      }
    },
  },
  watch: {
    modelValue: {
      immediate: true,
      handler(newValue) {
        // console.log('AccessorySelector: modelValue 已更新为:', newValue);
        // 同步内部值
        this.internalValue = newValue;
        
        // 如果传入的是none值，自动更改为glasses
        if (newValue === 'none') {
          this.$nextTick(() => {
            this.updateValue('glasses');
          });
        }
      }
    }
  },
};
</script>

<style>
.accessory-selector {
  background: linear-gradient(135deg, #ffffff 0%, #f5faf8 100%);
  border-radius: 16rpx;
  padding: 28rpx 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(33, 171, 134, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.7);
  margin-bottom: 30rpx;
  position: relative;
  z-index: 1;
}

.debug-button {
  background-color: #21ab86;
  color: white;
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  text-align: center;
  margin-bottom: 20rpx;
  font-size: 24rpx;
}

.selector-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #2c5c4e;
  margin-bottom: 24rpx;
  text-align: center;
}

.selector-category {
  margin-bottom: 22rpx;
}

.selector-category:last-child {
  margin-bottom: 0;
}

.category-title {
  font-size: 24rpx;
  color: #5a8a7a;
  margin-bottom: 12rpx;
  padding-left: 10rpx;
  border-left: 4rpx solid #21ab86;
  display: block;
}

.selector-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.selector-option {
  display: flex;
  align-items: center;
  padding: 10rpx 16rpx;
  border-radius: 30rpx;
  background-color: rgba(33, 171, 134, 0.05);
  transition: all 0.25s ease;
  cursor: pointer;
  
  box-sizing: border-box;
  position: relative;
  width: 300rpx;
  z-index: 2;
}

.selector-option:active {
  transform: scale(0.98);
}

.option-selected {
  background-color: rgba(33, 171, 134, 0.3);
  box-shadow: 0 2rpx 8rpx rgba(33, 171, 134, 0.2);
  transform: scale(1.05);
}

.option-radio {
  width: 30rpx;
  height: 30rpx;
  border-radius: 15rpx;
  border: 2rpx solid #5a8a7a;
  margin-right: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.option-selected .option-radio {
  border-color: #21ab86;
  border-width: 3rpx;
}

.radio-inner {
  width: 16rpx;
  height: 16rpx;
  border-radius: 8rpx;
  background-color: #21ab86;
}

.option-icon {
  font-size: 28rpx;
  margin-right: 8rpx;
  flex-shrink: 0;
}

.option-text {
  font-size: 24rpx;
  color: #2c5c4e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.option-selected .option-text {
  font-weight: 600;
  color: #21ab86;
}


</style> 